<template >
<Back title="更换手机号" />
<van-field
    v-model="phone"
    required
    label="已绑定手机号"
    placeholder="请输入手机号"
  />
  <van-field
    v-model="newphone"
    required
    label="新手机号"
    placeholder="请输入手机号"
  >
  <template #button>
          <van-button size="small" type="primary" @click="sendmes">发送验证码</van-button>
        </template>
  </van-field>
  <van-field
    v-model="pcode"
    required
    label="验证码"
    placeholder="请输入验证码"
    >
  </van-field>
  <van-button size="small" type="primary" @click="updatephone">确认修改</van-button>

</template>
<script setup>
import { useRouter } from 'vue-router'
import  http  from '../http/index.js'
import {showSuccessToast } from 'vant';
import { ref } from 'vue'
import axios from 'axios';
const router = useRouter()
const phone = ref('')
const newphone = ref('')
const pcode = ref('')
import Back from '../utils/Back.vue';
const sendmes=()=>{
  http.post('/user/send/',{phone:newphone.value}).then(res=>{
    if(res.data.code==200){
      showSuccessToast('发送成功,验证码为'+res.data.sms);

    }else{
      showFailToast('发送失败');
    }
  })
}
const updatephone=()=>{
  http.post('/user/updatephone/',{phone:phone.value,newphone:newphone.value,code:pcode.value}).then(res=>{
    if(res.data.code==200){
      showSuccessToast('修改成功');
      router.push('/login')
    }else{
      showFailToast('修改失败');
    }
  })
  
}
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userid')
  router.push('/')
}

</script>